<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="top">
        <div class="logo">
            <h1>
                <a href="#"></a>
            </h1>
        </div>
        <div class="topBar">
            <ul>
                <li><a href="#">音乐馆</a></li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">客户端</a></li>
                <li><a href="#">音乐号</a></li>
                <li><a href="#">VIP</a></li>
            </ul>
        </div>
        <div class="searchBar">
            <input type="text" placeholder="搜索音乐、MV、歌单、用户">
            <i class="icon"><a href="#"></a></i>
        </div>
        <div class="login"><a href="#">登录</a></div>
        <div class="green-VIP"><a href="#">开通绿钻豪华版</a><a href="#">开通付费包</a></div>
    </div>
    <div class="header w">
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">歌手</a></li>
                <li><a href="#">新碟</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">分类歌单</a></li>
                <li><a href="#">电台</a></li>
                <li><a href="#">MV</a></li>
                <li><a href="#">数字专辑</a></li>
                <li><a href="#">票务</a></li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="recommon clearfix">
            <div class="Arrow">
                <a href="#" class="fanhui"><i class="iconfont icon-fanhui"></i></a>
                <a href="#" class="gengduo"><i class="iconfont icon-gengduo"></i></a></div>
            <div class="w">
                <div class="dian">
                    <ul>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                        <li><a href="#"></a></li>
                    </ul>
                </div>
                <div class="rec title">
                    <h2>歌单推荐</h2>
                </div>
                <div class="rec list">
                    <ul>
                        <li><a href="#">为你推荐</a></li>
                        <li><a href="#">网络歌曲</a></li>
                        <li><a href="#">经典国语</a></li>
                        <li><a href="#">经典粤语</a></li>
                        <li><a href="#">官方歌单</a></li>
                        <li><a href="#">情歌</a></li>
                    </ul>
                </div>
                <div class="rec content clearfix">
                    <ul>
                        <li><a href="#">
                                <img src="img/rec1.jfif" alt="">
                                <p class="name">风雨来袭 · 宅家静享舒缓华语</p>
                                <p class="play hui">播放量：8.6万</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/rec2.jfif" alt="">
                                <p class="name">躁动狂热：街头青年嘻哈派对</p>
                                <p class="play hui">播放量：8.3万</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/rec3.jfif" alt="">
                                <p class="name">驰放电子：在舒缓氛围中驰骋</p>
                                <p class="play hui">播放量：3.0万</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/rec4.jfif" alt="">
                                <p class="name">冷门另类鼓点 沉醉躁动青春</p>
                                <p class="play hui">播放量：2.7万</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/rec5.jfif" alt="">
                                <p class="name">韩式欧美风 | 韩语说唱歌</p>
                                <p class="play hui">播放量：4.0万</p>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="new-songs">
            <div class="w clearfix">
                <div class="n-songs title">
                    <h2>新碟首发</h2>
                </div>
                <div class="n-songs list">
                    <ul>
                        <li><a href="#">内地</a></li>
                        <li><a href="#">港台</a></li>
                        <li><a href="#">欧美</a></li>
                        <li><a href="#">韩国</a></li>
                        <li><a href="#">日本</a></li>
                        <li><a href="#">其他</a></li>
                    </ul>
                </div>
                <div class="n-songs content clearfix">
                    <ul>

                        <li><a href="#">
                                <img src="img/f1.jpg" alt="">
                                <p class="name">孟秋落</p>
                                <p class="siner hui">王梓赫Ray</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f2.jpg" alt="">
                                <p class="name">爵迹临界天下 影视剧原声带</p>
                                <p class="siner hui">周深 / 金志文 / 张铭恩 / 音频怪物</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f3.jpg" alt="">
                                <p class="name">新长江之歌</p>
                                <p class="siner hui">刘辰希</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f4.jpg" alt="">
                                <p class="name">让一部分艺术家先富起来</p>
                                <p class="siner hui">辛迪</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f5.jpg" alt="">
                                <p class="name">冷冷的夜冷冷的你</p>
                                <p class="siner hui">黄静美</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f6.jpg" alt="">
                                <p class="name">薰衣草味的毕业季</p>
                                <p class="siner hui">万能和弦</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f7.jpg" alt="">
                                <p class="name">董鹏刘权</p>
                                <p class="siner hui">花冷颜</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f8.jpg" alt="">
                                <p class="name">一行情诗</p>
                                <p class="siner hui">贺一航</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f9.jpg" alt="">
                                <p class="name"> 青春加油！</p>
                                <p class="siner hui">GNZ48</p>
                            </a></li>
                        <li><a href="#">
                                <img src="img/f10.jpg" alt="">
                                <p class="name">孤独的人在哪里</p>
                                <p class="siner hui">摩登兄弟</p>
                            </a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="t half clearfix">
                <div class="download">
                    <div class="help">下载QQ音乐客户端</div>
                    <div class="content">
                        <ul>
                            <li><a href="#"><i class="Client PC"></i>
                                    <p>PC版</p>
                                </a></li>
                            <li><a href="#"><i class="Client Mac"></i>
                                    <p>Mac版</p>
                                </a></li>
                            <li><a href="#"><i class="Client Android"></i>
                                    <p>Android版</p>
                                </a></li>
                            <li><a href="#"><i class="Client iPhone"></i>
                                    <p>iPhone版</p>
                                </a></li>
                        </ul>
                    </div>
                </div>
                <div class="product">
                    <div class="help">特色产品</div>
                    <div class="content">
                        <ul>
                            <li><a href="#"><i class="Client k"></i>
                                    <p>全民k歌</p>
                                </a></li>
                            <li><a href="#"><i class="Client Su"></i>
                                    <p>Super Sound</p>
                                </a></li>
                            <li><a href="#"><i class="Client QPlay"></i>
                                    <p>QPlay</p>
                                </a></li>
                            <li><a href="#"></i>
                                    <p>i车载互联</p>
                                </a></li>
                            <li><a href="#">QQ演出</a></li>
                        </ul>
                    </div>
                </div>
                <div class="friendlink">
                    <div class="help">合作链接</div>
                    <div class="content clearfix">
                        <ul>
                            <li><a href="#">CJ ENM</a></li>
                            <li><a href="#">腾讯视频</a></li>
                            <li><a href="#">手机QQ空间</a></li>
                            <li><a href="#">最新版QQ</a></li>
                            <li><a href="#">腾讯社交广告</a></li>
                            <li><a href="#">电脑管家</a></li>
                            <li><a href="#">QQ浏览器</a></li>
                            <li><a href="#">腾讯微云</a></li>
                            <li><a href="#">腾讯云</a></li>
                            <li><a href="#">企鹅FM</a></li>
                            <li><a href="#">智能电视网</a></li>
                            <li><a href="#">当贝市场</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="f half">
            <div class="bottom-nav">
                <a href="#">关于腾讯</a>
                <i class="link">|</i>
                <a href="#">About Tencent</a>
                <i class="link">|</i>
                <a href="#">服务条款</a>
                <i class="link">|</i>
                <a href="#">用户服务协议</a>
                <i class="link">|</i>
                <a href="#">隐私政策</a>
                <i class="link">|</i>
                <a href="#">权利声明</a>
                <i class="link">|</i>
                <a href="#">广告服务</a>
                <i class="link">|</i>
                <a href="#">腾讯招聘</a>
                <i class="link">|</i>
                <a href="#">客服中心</a>
                <i class="link">|</i>
                <a href="#">网站导航</a>
            </div>
            <div class="copyRight">
                <p>Copyright © 1998 - 2019 Tencent. All Rights Reserved.</p>
                <p>腾讯公司 版权所有 腾讯网络文化经营许可证</p>
            </div>

        </div>
    </div>

</body>

</html>